<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=640,user-scalable=no">
		<title>商品分类</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/顶部和底部.css"/>
		<link rel="stylesheet" type="text/css" href="css/商品分类.css"/>
	</head>
	<body>
		<div id="spfl">
			<div class="zzj_warp" id="zzj_warp">
				<footer v-show="isxian">			<!-- v-for="(item,a) in box" :key="item"><img :src="imgArr[a]" -->
					<a  class="foot" href="#" @click="yinChang"><div  class="foot spfltab" id="f1" ><img src="img/sc_goods_logo.png" >商品分类</div></a>
					<a  class="foot" href="购物车2.html"><div class="foot" id="f1" ><img src="img/sc_car_logo.png" >购物车</div></a>
					<a  class="foot" href="个人中心.html"><div class="foot" id="f1" ><img src="img/sc_center_logo.png" >个人中心</div></a>
				</footer>
				<!-- 循环商品模块一 -->
				<a name="mianmo"><div id="zzj_yifu">
					<div id="zzj_yifu_box" @click="yinChang"><span>|</span><p id="nav_p">面膜</p></div>				
				</div></a>
				<div id="mk1">
				<div id="zzj_shangpin_box" v-for="(vv,ii) in yifu" :key="ii">
					<a href="详情页1.html"><img :src="vv.img" ></a>
				</div>
				</div>
				<!-- 循环商品模块二 -->
				<a name="ximiannai"><div id="zzj_yifu">
					<div id="zzj_yifu_box" @click="yinChang"><span>|</span><p id="nav_p">洗面奶</p></div>				
				</div></a>
				<div id="mk2">
					<div id="zzj_shangpin_box" v-for="(qq,xx) in xmn" :key="xx">
						<a href="详情页.html"><img :src="qq.imgs" ></a>
					</div>
				</div>
				<!-- 循环商品模块三 -->
				<a name="qiaokeli"><div id="zzj_yifu">
					<div id="zzj_yifu_box" @click="yinChang"><span>|</span><p id="nav_p">巧克力</p></div>				
				</div></a>
				<div id="mk2">
					<div id="zzj_shangpin_box" v-for="(ll,kk) in qkl" :key="kk">
						<a href="详情页.html"><img :src="ll.img3" ></a>
					</div>
				</div>
			</div>
			<!-- 侧边栏 -->
			<div id="zzj_cbl" v-show="isbox">
				<div id="cebianlan_left" @click="yinChang">
					<div id="left_img" >
						<img src="img/001_r6_c2.png" >
					</div>
				</div>
				<div id="cebianlan_right">
					<div id="ul1">
						<div id="cbl_div1" class="ul_top" @click="ope()" :class="idx==-1?'ul_top':'ul_bottom'"><p>面膜</p></div>
						<a href="#mianmo" @click="yinChang"><p id="zzj_span" v-for="(aa,intmm) in yifu" :key="intmm" v-show="isSh">{{aa.name}}</p></a>
					</div>
					<div id="ul1">
						<div id="cbl_div1" class="ul_top" @click="ote()" :class="idn==-1?'ul_top':'ul_bottom'"><p>洗面奶</p></div>
						<a href="#ximiannai" @click="yinChang"><p id="zzj_span" v-for="(aa,intmm) in xmn" :key="intmm" v-show="isxmn">{{aa.name}}</p></a>
					</div>
					<div id="ul1">
						<div id="cbl_div1" class="ul_top" @click="oqe()" :class="idq==-1?'ul_top':'ul_bottom'"><p>巧克力</p></div>
						<a href="#qiaokeli" @click="yinChang"><p id="zzj_span" v-for="(aa,intmm)  in qkl" :key="intmm" v-show="isqkl">{{aa.name}}</p></a>
					</div>
					
				</div>
			</div>
					
		
		</div>
	</body>
	<!-- 底部vue -->
	<script type="text/javascript">	
		// 底部固定栏Vue
		var spfl = new Vue({
				el:"#spfl",
				data:{
					isSh:false,
					isxmn:false,
					isqkl:false,
					isbox:false,
					isxian:true,
					idx:-1,
					idn:-1,
					idq:-1,
					arr:['1','2','3','4','5','6'],
					yifu:[
						{img:"img/主图1.jpg",name:"大时代面膜"},
						{img:"img/主图3.jpg",name:"黑魔法面膜"},
						{img:"img/主图1.jpg",name:"大时代面膜1"},
						{img:"img/主图3.jpg",name:"黑魔法面膜2"},
						{img:"img/主图1.jpg",name:"大时代面膜3"},
						{img:"img/主图3.jpg",name:"黑魔法面膜3"},
					],
					xmn:[
						{imgs:"img/洗面奶1.jpg",name:"RNW洗面奶"},
						{imgs:"img/洗面奶1.jpg",name:"欧莱雅洗面奶"},
						{imgs:"img/洗面奶1.jpg",name:"RNW洗面奶1"},
						{imgs:"img/洗面奶2.jpg",name:"欧莱雅洗面奶2"},
						{imgs:"img/洗面奶2.jpg",name:"RNW洗面奶3"},
						{imgs:"img/洗面奶2.jpg",name:"欧莱雅洗面奶3"},
					],
					qkl:[
						{img3:"img/sc_5_1.jpg",name:"德福巧克力"},
						{img3:"img/sc_5_1.jpg",name:"旺仔巧克力"},
						{img3:"img/sc_5_1.jpg",name:"德福巧克力1"},
						{img3:"img/sc_5_1.jpg",name:"旺仔巧克力2"},
						{img3:"img/sc_5_1.jpg",name:"德福巧克力3"},
						{img3:"img/sc_5_1.jpg",name:"旺仔巧克力3"},
					],
					
				},
				methods:{
					ope(u1){
						this.isSh = !this.isSh;
						this.idx = this.idx == u1 ? -1 : u1;
					},
					ote(u2){
						this.isxmn = !this.isxmn;		
						this.idn = this.idn == u2 ? -1 : u2;
					},
					oqe(u3){
						this.isqkl = !this.isqkl;
						this.idq = this.idq == u3 ? -1 : u3;
					},
					istop() {
						// this.idx=index  //这种情况点击后显示内容，再次点击不起作用
						this.idx = this.idx == u1 ? -1 : u1; //这种情况点击后显示内容，再次点击隐藏
					},
					yinChang(){
						this.isbox = !this.isbox;
						this.isxian = !this.isxian;
						this.isSh=false;
						this.isxmn=false;
						this.isqkl=false;
					},
				}
				
			});
			
			
	</script>
	
	
	
</html>
